<template>
    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="loginName" label="登录名" width="140">
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="手机号">
        </el-table-column>
         <el-table-column prop="sex" label="性别">
        </el-table-column>
      </el-table>

       <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
  </div>


    </el-main>
</template>
<script>
export default {
  data(){
      return {
        tableData:[],
        currentPage:1,
        pageSizes:[1, 2, 3, 4,5],
        pageSize:1,
        total:5
    }
  },mounted(){
      this.requestData();

  },methods:{
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
         this.requestData();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.requestData();

      },
    requestData(){
      var api = "http://localhost:8080/user/list"
      var params = {
        pageNum:this.currentPage,
        pageSize:this.pageSize
      }
      this.$http.get(api,{params:params}).then(response=>{
        console.log(response);
        this.tableData = response.body.result;
        this.total = response.body.total;
      });
    }
  }
}
</script>
